import React, { Component } from 'react';
import {
  View,
  Text,
  ScrollView,
  StyleSheet,
  Image,
} from 'react-native';

import PxToDp from '../../utils/PxToDp';
import fetchPerfence from '../../actions/PerfenceAction';

const perfenceIsLoading = true;

class YearRank extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(fetchPerfence(perfenceIsLoading, 2, '', '', '', 1));
  }
  render() {
    const perfenceData = this.props.perfenceData;
    const list = [];
    let obj = {};

    if (perfenceData && perfenceData.users && perfenceData.users.length > 0) {
      perfenceData.users.map((data, i) => {
        obj = { id: '', username: '', answers: '', img: '' }; // 车系偏好对象
        obj.id = i + 1;
        if (i === 0) {
          obj.img = require('../../img/home/mOne.png');
        } else if (i === 1) {
          obj.img = require('../../img/home/mTeo.png');
        } else if (i === 2) {
          obj.img = require('../../img/home/mThree.png');
        } else {
          obj.img = '';
        }
        obj.username = data.username;
        obj.answers = data.answers;
        list.push(obj);
      });
    }

    return (
      <View style={[styles.flex, styles.wrapper]}>
        <View style={[styles.row, styles.titleWrapper]}>
          <Text style={[styles.titleFont, styles.left]}>排名</Text>
          <Text style={[styles.titleFont, styles.center]}>销售管家</Text>
          <Text style={[styles.titleFont, styles.left]}>销售总人数</Text>
        </View>
        <ScrollView style={[styles.listWrapper]}>
          {list.map(data => (
            <View
              style={[styles.row, styles.list]}
              key={data.id}
            >
              {
                data.img
                ?
                  <View style={styles.left}>
                    <Image style={styles.img} source={data.img} />
                  </View>
                :
                  <Text style={[styles.rank, styles.left]}>{data.id}</Text>
              }
              <Text style={[styles.rank, styles.name, styles.center]}>{data.username}</Text>
              <Text style={[styles.rank, styles.left]}>{data.answers}</Text>
            </View>
        ),
        )
      }
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  wrapper: {
    shadowOffset: { width: 0, height: 0 },
    shadowColor: '#E4E5F4',
    shadowOpacity: 1,
    shadowRadius: PxToDp(10),
  },
  row: {
    flexDirection: 'row',
  },
  titleWrapper: {
    alignItems: 'center',
    width: PxToDp(355),
    height: PxToDp(30),
    paddingLeft: PxToDp(14),
    backgroundColor: '#f8f8fb',
  },
  titleFont: {
    color: '#878787',
    fontSize: PxToDp(12),
  },
  listWrapper: {
    width: PxToDp(355),
    height: PxToDp(312),
    backgroundColor: '#fff',
  },
  list: {
    alignItems: 'center',
    height: PxToDp(40),
    paddingLeft: PxToDp(16),
    backgroundColor: 'transparent',
    borderColor: '#f3f3f3',
    borderBottomWidth: PxToDp(1),
  },
  rank: {
    color: '#333',
    fontSize: PxToDp(16),
  },
  left: {
    flex: 2,
  },
  center: {
    flex: 3,
  },
  img: {
    height: PxToDp(19),
    width: PxToDp(19),
  },
});

export default YearRank;
